<template>
  <div class="wh-full flex-col bg-[url(@/assets/images/login_bg.webp)] bg-cover">
    <div
      class="m-auto max-w-700 min-w-345 f-c-c rounded-8 bg-opacity-20 bg-cover p-12 card-shadow auto-bg"
    >
      <div class="hidden w-380 px-20 py-35 md:block">
        <img src="@/assets/images/login_banner.webp" class="w-full" alt="login_banner" />
      </div>

      <div class="w-320 flex-col px-20 py-32">
        <h2 class="f-c-c text-24 text-#6a6a6a font-normal">
          <img src="@/assets/images/logo.png" height="50" class="mr-12" />
          {{ title }}
        </h2>
        <n-input
          v-model:value.trim="registerInfo.email"
          autofocus
          class="mt-32 h-40 items-center"
          placeholder="请输入邮箱"
          clearable
          :maxlength="20"
        >
          <template #prefix>
            <i class="i-ic:outline-email mr-12 opacity-20" />
          </template>
        </n-input>
        <div class="flex items-center">
          <n-input
            v-model:value.trim="registerInfo.code"
            autofocus
            class="mt-32 h-40 items-center"
            placeholder="请输入验证码"
            clearable
            :maxlength="6"
          >
            <template #prefix>
              <i class="i-carbon:security mr-12 opacity-20"></i>
            </template>
          </n-input>
          <n-button class="ml-8 mt-32 h-40" @click="handleSendEmailCaptcha">获取验证码</n-button>
        </div>
        <n-input
          v-model:value.trim="registerInfo.username"
          autofocus
          class="mt-32 h-40 items-center"
          placeholder="请输入用户名"
          clearable
          :maxlength="20"
        >
          <template #prefix>
            <i class="i-fe:user mr-12 opacity-20" />
          </template>
        </n-input>
        <n-input
          v-model:value.trim="registerInfo.password"
          class="mt-32 h-40 items-center"
          type="password"
          show-password-on="mousedown"
          placeholder="请输入密码"
          clearable
          :maxlength="20"
        >
          <template #prefix>
            <i class="i-fe:lock mr-12 opacity-20" />
          </template>
        </n-input>
        <div class="mt-32 flex items-center">
          <n-button
            class="h-40 flex-1 rounded-5 text-16"
            type="primary"
            :loading="loading"
            @click="handleRegister"
          >
            注册
          </n-button>
        </div>
      </div>
    </div>

    <TheFooter class="py-12" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from './api.js'
import { useRouter } from 'vue-router'

const title = import.meta.env.VITE_TITLE

const router = useRouter()

const registerInfo = ref({
  username: '',
  password: '',
  email: '',
  code: '',
})

const loading = ref(false)

async function handleSendEmailCaptcha() {
  const { email } = registerInfo.value
  if (!email) return $message.warning('请输入邮箱')
  try {
    const { data } = await api.sendEmailCaptcha(email)
    if (data) {
      $message.success(`验证码已发送至 ${email}`)
    } else {
      $message.error('验证码发送失败')
    }
  } catch (e) {
    console.error(e)
  }
}
async function handleRegister() {
  const { username, password, email, code } = registerInfo.value
  if (!email) return $message.warning('请输入邮箱')
  if (!code) return $message.warning('请输入验证码')
  if (!username || !password) return $message.warning('请输入用户名和密码')

  try {
    loading.value = true
    const result = await api.register({
      username,
      password,
      email,
      code,
    })

    if (result) {
      $message.success('注册成功')
      router.replace('/login')
    } else {
      $message.error('注册失败')
    }
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="less"></style>
